<template>
  <div id="app">
    <!-- <router-view/> -->
    <sku :titles="this.titles"
         :options="this.options"
         :keys="this.keys"
         :paths="this.paths">
    </sku>
  </div>
</template>

<script>
import sku from './components/sku'

export default {
  name: 'App',
  components: { sku },
  data() {
    return {
      // 规格名称
      titles: ['颜色', '内存', '运营商'],
      // 规格
      options: [
        ['白色', '黑色', '金色'],
        ['128g', '64g', '32g', '16g'],
        ['电信', '联通', '移动']
      ],
      // 以规格名称为key: {"颜色":{"白色":0,"黑色":1,"金色":2},"内存":{"128g":3,"64g":4,"32g":5,"16g":6},"运营商":{"电信":7,"联通":8,"移动":9}}
      keys: {
        颜色: {
          白色: 0,
          黑色: 1,
          金色: 2
        },
        内存: {
          '128g': 3,
          '64g': 4,
          '32g': 5,
          '16g': 6
        },
        运营商: {
          电信: 7,
          联通: 8,
          移动: 9
        }
      },
      // 以路径为key: {"0,3,7":{"stock":1,"price":1,"symbols":[0,3,7],"values":["白色","128g","电信"],"titles":["颜色","内存","运营商"]}
      paths: {
        '0,3,7': {
          stock: 1,
          price: 1,
          symbols: [0, 3, 7],
          values: ['白色', '128g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        // '0,3,8': {
        //   stock: 1,
        //   price: 2,
        //   symbols: [0, 3, 8],
        //   values: ['白色', '128g', '联通'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,3,9': {
        //   stock: 1,
        //   price: 3,
        //   symbols: [0, 3, 9],
        //   values: ['白色', '128g', '移动'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,4,7': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 4, 7],
        //   values: ['白色', '64g', '电信'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,4,8': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 4, 8],
        //   values: ['白色', '64g', '联通'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,4,9': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 4, 9],
        //   values: ['白色', '64g', '移动'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,5,7': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 5, 7],
        //   values: ['白色', '32g', '电信'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,5,8': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 5, 8],
        //   values: ['白色', '32g', '联通'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,5,9': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 5, 9],
        //   values: ['白色', '32g', '移动'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,6,7': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 6, 7],
        //   values: ['白色', '16g', '电信'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,6,8': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 6, 8],
        //   values: ['白色', '16g', '联通'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        // '0,6,9': {
        //   stock: 1,
        //   price: 1,
        //   symbols: [0, 6, 9],
        //   values: ['白色', '16g', '移动'],
        //   titles: ['颜色', '内存', '运营商']
        // },
        '1,3,7': {
          stock: 1,
          price: 1,
          symbols: [1, 3, 7],
          values: ['黑色', '128g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,3,8': {
          stock: 1,
          price: 1,
          symbols: [1, 3, 8],
          values: ['黑色', '128g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,3,9': {
          stock: 1,
          price: 1,
          symbols: [1, 3, 9],
          values: ['黑色', '128g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,4,7': {
          stock: 1,
          price: 1,
          symbols: [1, 4, 7],
          values: ['黑色', '64g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,4,8': {
          stock: 1,
          price: 1,
          symbols: [1, 4, 8],
          values: ['黑色', '64g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,4,9': {
          stock: 1,
          price: 1,
          symbols: [1, 4, 9],
          values: ['黑色', '64g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,5,7': {
          stock: 1,
          price: 1,
          symbols: [1, 5, 7],
          values: ['黑色', '32g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,5,8': {
          stock: 1,
          price: 1,
          symbols: [1, 5, 8],
          values: ['黑色', '32g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,5,9': {
          stock: 1,
          price: 1,
          symbols: [1, 5, 9],
          values: ['黑色', '32g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,6,7': {
          stock: 1,
          price: 1,
          symbols: [1, 6, 7],
          values: ['黑色', '16g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,6,8': {
          stock: 1,
          price: 1,
          symbols: [1, 6, 8],
          values: ['黑色', '16g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '1,6,9': {
          stock: 1,
          price: 1,
          symbols: [1, 6, 9],
          values: ['黑色', '16g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,3,7': {
          stock: 1,
          price: 1,
          symbols: [2, 3, 7],
          values: ['金色', '128g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,3,8': {
          stock: 1,
          price: 1,
          symbols: [2, 3, 8],
          values: ['金色', '128g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,3,9': {
          stock: 1,
          price: 1,
          symbols: [2, 3, 9],
          values: ['金色', '128g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,4,7': {
          stock: 1,
          price: 1,
          symbols: [2, 4, 7],
          values: ['金色', '64g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,4,8': {
          stock: 1,
          price: 1,
          symbols: [2, 4, 8],
          values: ['金色', '64g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,4,9': {
          stock: 1,
          price: 1,
          symbols: [2, 4, 9],
          values: ['金色', '64g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,5,7': {
          stock: 1,
          price: 1,
          symbols: [2, 5, 7],
          values: ['金色', '32g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,5,8': {
          stock: 1,
          price: 1,
          symbols: [2, 5, 8],
          values: ['金色', '32g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,5,9': {
          stock: 1,
          price: 1,
          symbols: [2, 5, 9],
          values: ['金色', '32g', '移动'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,6,7': {
          stock: 1,
          symbols: [2, 6, 7],
          values: ['金色', '16g', '电信'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,6,8': {
          stock: 1,
          price: 1,
          symbols: [2, 6, 8],
          values: ['金色', '16g', '联通'],
          titles: ['颜色', '内存', '运营商']
        },
        '2,6,9': {
          stock: 1,
          price: 1,
          symbols: [2, 6, 9],
          values: ['金色', '16g', '移动'],
          titles: ['颜色', '内存', '运营商']
        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
